<template>
  <div>
    <p>欢迎：{{ username }}</p>
    <el-menu :default-openeds="['1']">
      <el-submenu index="1">
        <template slot="title">欢迎使用</template>
        <el-menu-item>
          <router-link to="/home/index">后台首页</router-link>
        </el-menu-item>
        <el-menu-item>
          <router-link to="/safe/change_password">修改密码</router-link>
        </el-menu-item>
        <el-menu-item>
          <a href="javascript:void(0);" @click="logout">安全退出</a>
        </el-menu-item>
      </el-submenu>

      <div v-for="(item, key) in menu" :key="key">
        <div v-if="item.is_auth">
          <el-submenu :index="String(item.moduleid)">
            <template slot="title">{{ item.module_cn }}</template>
            <div v-if="groupid == 1">
              <div v-for="(p, k) in item.power" :key="k">
                <el-menu-item>
                  <router-link :to="'/' + item.module_en + '/' + p.name">{{
                    p.chinese
                  }}</router-link>
                </el-menu-item>
              </div>
            </div>
            <div v-else>
              <div v-for="(p, k) in item.power" :key="k">
                <el-menu-item
                  v-if="
                    !p.is_auth ||
                    power.indexOf(item.module_en + '/' + p.name) > -1
                  "
                >
                  <router-link :to="'/' + item.module_en + '/' + p.name">{{
                    p.chinese
                  }}</router-link>
                </el-menu-item>
              </div>
            </div>
          </el-submenu>
        </div>

        <div v-else>
          <el-submenu :index="String(item.moduleid)">
            <template slot="title">{{ item.module_cn }}</template>
            <div v-for="(p, k) in item.power" :key="k">
              <el-menu-item>
                <router-link :to="'/' + item.module_en + '/' + p.name">{{
                  p.chinese
                }}</router-link>
              </el-menu-item>
            </div>
          </el-submenu>
        </div>
      </div>
    </el-menu>
  </div>
</template>

<script>
import Cookies from "js-cookie";
export default {
  data() {
    return {
      userid: "",
      username: "",
      groupid: 0,
      power: [],
      menu: [],
    };
  },
  methods: {
    logout() {
      this.$confirm("确定要退出吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$router.replace({
            path: "/home/logout",
          });
        })
        .catch(() => {});
    },
  },
  async mounted() {
    var auth = Cookies.get("auth");
    var userid = Cookies.get("userid");
    var username = Cookies.get("username");
    var groupid = Cookies.get("groupid");
    var power = Cookies.get("power");

    this.userid = userid;
    this.username = username;
    this.groupid = groupid;
    this.power = JSON.parse(power);

    try {
      let data = await this.$axios.post("/api/menu/left", {});
      this.menu = data.data;
    } catch (error) {
      this.$message.error(error.toString());
    }
  },
};
</script>
